﻿<template>
  <div class="app-container">
    <div class="filter-title">
      <el-form label-position="right" label-width="80px">
        <el-form-item :label="$t('goods.name')+' :'">
          <el-input
            v-model="listQuery.goods_name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('goods.name')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left:20px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t('table.search') }}</el-button>
        <el-button
          v-if="permission.add"
          style="margin-left: 10px;float: right"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >{{ $t('table.add') }}</el-button>
        <el-button
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleRefresh"
        >{{ $t('table.refresh') }}</el-button>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
      border
      fit
      highlight-current-row
      style="width: 100%min-height:1000px"
    >
      <el-table-column fixed="left" align="center" :label="$t('table.id')" width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.goods_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.catName')">
        <template slot-scope="scope">
          <span>{{ scope.row.category_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.code')">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.setPrice')">
        <template slot-scope="scope">
          <span>{{ scope.row.set_price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.getPrice')">
        <template slot-scope="scope">
          <span>{{ scope.row.get_price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('goods.stock')">
        <template slot-scope="scope">
          <span>{{ scope.row.stock }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.status')">
        <template slot-scope="scope">
          <span :class="statusColor(scope.row.status)">{{ shelfEs(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('table.actions')"
        :width="operWidth"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleRead(scope.row)"
          >{{ $t('table.read') }}</el-button>
          <el-button
            v-if="permission.update"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >{{ $t('table.edit') }}</el-button>
          <el-button
            v-if="scope.row.status === 1 && permission.del"
            type="danger"
            size="mini"
            @click="handleObtained(scope.row)"
          >{{ $t('table.obtained') }}</el-button>
          <el-button
            v-else-if="permission.del"
            type="success"
            size="mini"
            @click="handleShelf(scope.row)"
          >{{ $t('table.shelf') }}</el-button>
          <el-button
            v-if="permission.del"
            size="mini"
            type="danger"
            @click="handleModifyStatus(scope.row,'deleted')"
          >{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 编辑 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="35%"
        style="width: 400px margin-left:120px"
        size="small"
      >
        <el-form-item :label="$t('goods.name')+' :'" prop="goods_name">
          <el-input v-model="temp.goods_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('goods.catName')+' :'" prop="category_name">
          <el-input v-model="category_name" disabled></el-input>
          <el-button type="primary" @click="chooseMenu">选择菜单</el-button>
        </el-form-item>
        <el-form-item :label="$t('goods.mainPicture')+' :'" prop="picture">
          <el-input v-model="temp.picture" style="display:none"></el-input>
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
              <label class="el-upload-list__item-status-label">
                <i class="el-icon-upload-success el-icon-check"></i>
              </label>
              <i class="el-icon-close" @click="changPicture('picture')"></i>
              <i class="el-icon-close-tip"></i>
            </li>
            <div v-else>
              <button>
                点击上传
                <input
                  ref="file"
                  type="file"
                  class="uploadImagesInput"
                  @change="e=>{return submitUpload(e,'picture','uploading')}"
                />
              </button>
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture1')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture1"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture1"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
              <label class="el-upload-list__item-status-label">
                <i class="el-icon-upload-success el-icon-check"></i>
              </label>
              <i class="el-icon-close" @click="changPicture('picture1')"></i>
              <i class="el-icon-close-tip"></i>
            </li>
            <div v-else>
              <button>
                点击上传
                <input
                  ref="file"
                  type="file"
                  class="uploadImagesInput"
                  @change="e=>{return submitUpload(e,'picture1','uploading')}"
                />
              </button>
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture2')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture2"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture2"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
              <label class="el-upload-list__item-status-label">
                <i class="el-icon-upload-success el-icon-check"></i>
              </label>
              <i class="el-icon-close" @click="changPicture('picture2')"></i>
              <i class="el-icon-close-tip"></i>
            </li>
            <div v-else>
              <button>
                点击上传
                <input
                  ref="file"
                  class="uploadImagesInput"
                  type="file"
                  @change="e=>{return submitUpload(e,'picture2','uploading')}"
                />
              </button>
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture3')+' :'" prop="picture3">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture3"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture3"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
              <label class="el-upload-list__item-status-label">
                <i class="el-icon-upload-success el-icon-check"></i>
              </label>
              <i class="el-icon-close" @click="changPicture('picture3')"></i>
              <i class="el-icon-close-tip"></i>
            </li>
            <div v-else>
              <button>
                点击上传
                <input
                  ref="file"
                  type="file"
                  class="uploadImagesInput"
                  @change="e=>{return submitUpload(e,'picture3','uploading')}"
                />
              </button>
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.price')+' :'" prop="price">
          <el-input-number v-model="temp.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.marketPrice')+' :'" prop="market_price">
          <el-input-number v-model="temp.market_price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.setPrice')+' :'" prop="set_price">
          <el-input-number v-model="temp.set_price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.isGet')+' :'" prop="is_get">
          <el-radio-group v-model="temp.is_get">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="temp.is_get === 1" :label="$t('goods.getPrice')+' :'" prop="get_price">
          <el-input-number v-model="temp.get_price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.extraCurrency')+' :'" prop="extra_currency">
          <el-input-number v-model="temp.extra_currency" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.stock')+' :'" prop="stock">
          <el-input-number v-model="temp.stock" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('goods.introduction')+' :'" prop="introduction">
          <el-input v-model="temp.introduction" type="textarea"></el-input>
        </el-form-item>
        <el-form-item :label="$t('goods.description')+' :'" prop="description">
          <el-input v-model="temp.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item :label="$t('goods.code')+' :'" prop="code">
          <el-input-number v-model="temp.code" :controls="false"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          :disabled="!createDisabled"
          @click="createData"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="!updateDisabled"
          @click="updateData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormRead">
      <el-form
        :model="temp"
        label-position="right"
        label-width="40%"
        style="width: 400px margin-left:120px"
      >
        <el-form-item :label="$t('goods.name')+' :'">
          <span>{{ temp.goods_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.catName')+' :'">
          <span>{{ category_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.mainPicture')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
            </li>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture1')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture1"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture1"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
            </li>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture2')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture2"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture2"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
            </li>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.picture3')+' :'">
          <div class="updateImage" :loding="uploading">
            <li
              v-if="temp.picture3"
              tabindex="0"
              class="el-upload-list__item is-success"
              style="width:150px;display:block"
            >
              <img
                :src="temp.picture3"
                alt
                class="el-upload-list__item-thumbnail"
                style="width:100%;height:auto"
              />
            </li>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goods.price')+' :'">
          <span>{{ temp.price }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.marketPrice')+' :'">
          <span>{{ temp.market_price }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.setPrice')+' :'">
          <span>{{ temp.set_price }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.isGet')+' :'">
          <span>{{ stateEstimation(temp.is_get) }}</span>
        </el-form-item>
        <el-form-item v-if="temp.is_get ===1" :label="$t('goods.getPrice')+' :'">
          <span>{{ temp.get_price }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.extraCurrency')+' :'">
          <span>{{ temp.extra_currency }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.stock')+' :'">
          <span>{{ temp.stock }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.introduction')+' :'">
          <span>{{ temp.introduction }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.description')+' :'">
          <span>{{ temp.description }}</span>
        </el-form-item>
        <el-form-item :label="$t('goods.code')+' :'">
          <span>{{ temp.code }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <span>{{ shelfEs(temp.status) }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 选择菜单 -->
    <el-dialog title="父菜单" :visible.sync="dialogMenuRead">
      <el-tree :props="defaultProps" :data="menuList" @node-click="handleNodeClick"></el-tree>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Goods",
  data() {
    const categoryName = (rule, value, callback) => {
      if (this.category_name) {
        callback();
      } else {
        callback(new Error("请选择商品类型"));
      }
    };
    const code = (rule, value, callback) => {
      if (value) {
        if ((value + "").length !== 13) {
          callback(new Error("商品条码必须为数字且为13位"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入商品条码"));
      }
    };
    const introduction = (rule, value, callback) => {
      if (value) {
        if ((value + "").length >= 2 && (value + "").length <= 150) {
          callback();
        } else {
          callback(new Error("商品简介不得低于2个字符且不得超过130个字符"));
        }
      } else {
        callback(new Error("请输入商品简介"));
      }
    };
    const description = (rule, value, callback) => {
      if (value) {
        if ((value + "").length >= 2 && (value + "").length <= 150) {
          callback();
        } else {
          callback(new Error("商品详情不得低于2个字符且不得超过130个字符"));
        }
      } else {
        callback(new Error("请输入商品详情"));
      }
    };
    const price = (rule, value, callback) => {
      if (value || value === 0) {
        if (value <= 0) {
          callback(new Error("商品原价必须大于0元"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入商品原价"));
      }
    };
    const market_price = (rule, value, callback) => {
      if (value || value === 0) {
        if (value <= 0) {
          callback(new Error("商品市场价必须大于0元"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入商品市场价"));
      }
    };
    const set_price = (rule, value, callback) => {
      if (value || value === 0) {
        if (value <= 0) {
          callback(new Error("充值价格必须大于0元"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入充值价格"));
      }
    };
    const extra_currency = (rule, value, callback) => {
      if (value || value === 0) {
        if (value < 0) {
          callback(new Error("赠币个数必须大于等于0"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入赠币个数"));
      }
    };

    return {
      dialogMenuRead: false,
      menuList: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      uploading: false,
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        goods_name: ""
      },
      temp: {
        goods_id: undefined,
        goods_name: "",
        status: "",
        price: undefined,
        market_price: undefined,
        set_price: undefined,
        get_price: "",
        is_get: "",
        extra_currency: undefined,
        stock: "",
        introduction: "",
        description: "",
        code: undefined,
        picture: "",
        picture1: "",
        picture2: "",
        picture3: ""
      },
      category_id: "",
      category_name: "",
      dialogFormVisible: false,
      dialogFormRead: false,
      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        goods_name: [
          { required: true, message: "请填写商品名称", trigger: "blur" }
        ],
        category_name: [
          { required: true, trigger: "change", validator: categoryName }
        ],
        picture: [{ required: true, message: "请上传主图", trigger: "change" }],
        price: [{ required: true, trigger: "blur", validator: price }],
        market_price: [
          { required: true, trigger: "blur", validator: market_price }
        ],
        set_price: [{ required: true, trigger: "blur", validator: set_price }],
        get_price: [
          { required: true, message: "请输入兑换价格", trigger: "blur" }
        ],
        is_get: [
          { required: true, message: "请选择是否可提现", trigger: "change" }
        ],
        extra_currency: [
          { required: true, trigger: "blur", validator: extra_currency }
        ],
        stock: [{ required: true, message: "请输库存个数", trigger: "blur" }],
        introduction: [
          { required: true, trigger: "blur", validator: introduction }
        ],
        description: [
          { required: true, trigger: "blur", validator: description }
        ],
        code: [{ required: true, trigger: "blur", validator: code }]
      },
      createDisabled: true,
      updateDisabled: true,
      loading: false,
      industryOptions: [],
      areaOptions: [],
      permission: {
        add: false,
        del: false,
        update: false
      }
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.del) {
        itemCount += 2;
      }
      if (this.permission.update) {
        itemCount += 1;
      }
      if (this.permission.review) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.add = true;
      this.permission.update = true;
      this.permission.del = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 202) {
          this.permission.add = true;
        } else if (id === 203) {
          this.permission.update = true;
        } else if (id === 204) {
          this.permission.del = true;
        }
      });
    }
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.goods_name) {
        data["goods_name"] = this.listQuery.goods_name;
      }
      const maintainIndexPath = {
        // 获取商品列表
        company: "STQ",
        api: "pc_goods_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(maintainIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleModifyStatus(row) {
      this.$confirm("此操作将永久删除该商品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const maintainDeletePath = {
            company: "STQ",
            api: "pc_goods_delete",
            version: "1.0",
            data: {
              goods_id: row.goods_id
            }
          };
          this.socketApi.sendSock(JSON.stringify(maintainDeletePath), res => {
            if (res) {
              this.socketData(res);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetTemp() {
      this.temp = {
        goods_id: undefined,
        goods_name: "",
        status: "",
        price: undefined,
        market_price: undefined,
        set_price: undefined,
        get_price: "",
        is_get: "",
        extra_currency: undefined,
        stock: "",
        introduction: "",
        description: "",
        code: undefined,
        picture: "",
        picture1: "",
        picture2: "",
        picture3: ""
      };
      this.category_id = "";
      this.category_name = "";
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        goods_name: ""
      };
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      // 添加商品
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.createDisabled) {
            this.createDisabled = false;
            let get_price = "";
            if (this.temp.is_get === 1) {
              get_price = this.temp.is_get;
            }
            const data = {
              goods_name: this.temp.goods_name,
              category_id: this.category_id,
              category_name: this.category_name,
              price: this.temp.price,
              market_price: this.temp.market_price,
              set_price: this.temp.set_price,
              get_price: get_price,
              is_get: this.temp.is_get,
              extra_currency: this.temp.extra_currency,
              stock: this.temp.stock,
              picture: this.temp.picture,
              picture1: this.temp.picture1,
              picture2: this.temp.picture2,
              picture3: this.temp.picture3,
              introduction: this.temp.introduction,
              description: this.temp.description,
              code: this.temp.code
            };
            const maintainAddPath = {
              company: "STQ",
              api: "pc_goods_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(maintainAddPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.createDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    copyData() {
      this.category_id = this.temp.category_id;
      this.category_name = this.temp.category_name;
    },
    handleUpdate(row) {
      // 打开编辑弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.copyData();
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.copyData();
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    handleObtained(row) {
      const maintainEditPath = {
        company: "STQ",
        api: "pc_goods_edit",
        version: "1.0",
        data: {
          goods_id: row.goods_id,
          status: 2,
          returnType: "obtained"
        }
      };
      this.socketApi.sendSock(JSON.stringify(maintainEditPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 下架失败 ");
        }
        setTimeout(() => {
          this.updateDisabled = true;
        }, 1000);
      });
    },
    handleShelf(row) {
      const maintainEditPath = {
        company: "STQ",
        api: "pc_goods_edit",
        version: "1.0",
        data: {
          goods_id: row.goods_id,
          status: 1,
          returnType: "shelf"
        }
      };
      this.socketApi.sendSock(JSON.stringify(maintainEditPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    updateData() {
      // 更新商品信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.updateDisabled) {
            this.updateDisabled = false;

            let get_price = "";
            if (this.temp.is_get === 1) {
              get_price = this.temp.is_get;
            }
            const data = {
              goods_id: this.temp.goods_id,
              goods_name: this.temp.goods_name,
              category_id: this.category_id,
              category_name: this.category_name,
              price: this.temp.price,
              market_price: this.temp.market_price,
              set_price: this.temp.set_price,
              get_price: get_price,
              is_get: this.temp.is_get,
              extra_currency: this.temp.extra_currency,
              stock: this.temp.stock,
              picture: this.temp.picture,
              picture1: this.temp.picture1,
              picture2: this.temp.picture2,
              picture3: this.temp.picture3,
              introduction: this.temp.introduction,
              description: this.temp.description,
              code: this.temp.code
            };
            data["returnType"] = "update";
            const maintainEditPath = {
              company: "STQ",
              api: "pc_goods_edit",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(maintainEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    // 区域行业选择
    getIndustry(query) {
      const industryIndexPath = {
        company: "STQ",
        api: "pc_trade_index",
        version: "1.0",
        data: {
          name: query
        }
      };
      this.socketApi.sendSock(JSON.stringify(industryIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getArea(query) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          name: query
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    stateEstimation(status) {
      switch (parseInt(status)) {
        case 1:
          return "是";
        case 2:
          return "否";
        default:
          return status;
      }
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_region_index") {
            this.areaOptions = resj.data;
          } else if (resj.api === "pc_trade_index") {
            this.industryOptions = resj.data;
          } else if (resj.api === "pc_goods_index") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "pc_goods_add") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_goods_edit" && resj.type === "update") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_goods_edit" && resj.type === "shelf") {
            this.getList();
            this.$notify({
              title: "成功",
              message: "上架成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_goods_edit" && resj.type === "obtained") {
            this.getList();
            this.$notify({
              title: "成功",
              message: "下架成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_goods_delete") {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else if (
            resj.api === "pc_GoodsCategory_index" &&
            resj.type === "getMenu"
          ) {
            this.menuList = resj.data;
          }
        }
      }
    },
    chooseMenu() {
      this.dialogMenuRead = true;
      const authRuleIndexPath = {
        company: "STQ",
        api: "pc_GoodsCategory_index",
        version: "1.0",
        data: {
          returnType: "getMenu"
        }
      };
      this.socketApi.sendSock(JSON.stringify(authRuleIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleNodeClick(data) {
      this.category_id = data.id;
      this.category_name = data.name;
      this.dialogMenuRead = false;
    },
    submitUpload(e, name, loading) {
      this[loading] = true;
      const video = new FormData();
      video.append("video", e.target.files[0]);
      const index = e.target.files[0].name.lastIndexOf(".");
      const suffix = e.target.files[0].name.substr(index + 1).toLowerCase();
      const imageFile = ["jpg", "jpeg", "png"];
      if (imageFile.indexOf(suffix) !== -1) {
        if (e.target.files[0].size <= 500 * 1024) {
          this.updateFile(video, result => {
            if (result.data.code === 0) {
              this.$message.error(result.data.message);
            } else {
              this.temp[name] = result.data.data.video_url;
            }
            this[loading] = false;
          });
        } else {
          this.$message.error("图片大小不得超过500kb");
          this[loading] = false;
          return false;
        }
      } else {
        this.$message.error("只能上传jpg/png文件");
        this[loading] = false;
        return false;
      }
    },
    changPicture(name) {
      this.$confirm("删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.temp[name].lastIndexOf("/");
          const str = this.temp[name].substring(
            index + 1,
            this.temp[name].length
          );
          const video_name = { video_name: str };

          this.deleteFile(video_name, result => {
            if (result.data.code === 0) {
              this.$message.error(result.data.message);
            } else {
              this.temp[name] = "";
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
